<template>
  <view class="news" @click="goPage(`/pages/home/newsDetails?id=${info.id}`)">
    <view class="time"> {{ dayjs(info.gmtCreate).format("YYYY-MM-DD") }} </view>
    <view class="title"> {{ info.title }} </view>
    <view class="ctn"> {{ info.describe }} </view>
    <image class="img" :src="info.picUrl" mode="aspectFill" />
  </view>
</template>
<script setup lang="ts">
import { goPage } from "@/utils/commonFn";
import dayjs from "dayjs";
const { info } = defineProps<{
  info: any;
}>();
</script>
<style lang="less" scoped>
.news {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  .time {
    font-size: 24rpx;
    color: #333333;
    position: relative;
    padding-left: 20rpx;
    &::before {
      content: "";
      width: 10rpx;
      height: 10rpx;
      background: #81d8d0;
      position: absolute;
      left: 0;
      top: 28%;
      border-radius: 50%;
    }
  }
  .title {
    font-size: 32rpx;
    color: #333333;
    font-weight: bold;
    margin-top: 32rpx;
  }
  .ctn {
    font-size: 28rpx;
    color: #333333;
    margin-top: 20rpx;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
  }
  .img {
    width: 100%;
    height: 360rpx;
    border-radius: 16rpx;
    background: #4f9ce0;
    margin-top: 32rpx;
  }
}
</style>
